<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="common.css" />
    <style>
      body {
        height: 200vh;
        background-color: #111;
      }
      section {
        position: absolute;
        height: calc(100% -200px);
        width: 100%;
        background-color: #2abbff;
      }
      section .curve {
        position: absolute;
        bottom: -200px;
        height: 200px;
        width: 100%;
        transform-origin: top;
      }
      section .curve img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <section>
      <span class="curve"
        ><img
          src="https://pica.zhimg.com/v2-f3d3c3b8b8b84a82061d4231bd8609d0_1440w.jpg"
          alt=""
      /></span>
    </section>
  </body>
  <script type="text/javascript">
    window.addEventListener("scroll", function () {
      let value = 1 + window.scrollY / -500;
      let curve = document.querySelector(".curve");
      curve.style.transform = `scale(${value})`;
    });
  </script>
</html>
